<template>
    <div class="login-container">
        <el-row justify="center">
            <el-col :span="8" class="login-area" :xs="24">
                <span class="login-hello"></span>
                <h1>登录到尚品甄选管理系统</h1>
                <el-form class="login-form" :rules="rule" ref="elFormLogin" :model="loginForm">
                    <el-form-item prop="userName">
                        <el-input :prefix-icon="User" v-model="loginForm.userName"></el-input>
                    </el-form-item>
                    <el-form-item prop="passWord">
                        <el-input type="password" :prefix-icon="Lock" :show-password="true"
                            v-model="loginForm.passWord"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="login-btn" @click="login">登陆</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
// elPlus登录表单输入框内的用户和密码icon
import { User, Lock } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue';
import useLoginStore from '@/stores/modules/useLogin'
import { ElNotification } from 'element-plus';
import { useRouter } from 'vue-router';

const loginForm = reactive({
    userName: 'admin',
    passWord: 'abc123'
})

let router = useRouter()
let loginStore = useLoginStore()
// store实例不能和store重名

// 表单校验
const validatorUserName = (rule, value, callback) => {
    // rule为校验规则对象
    // value为输入组件内文本值
    // callback为回调函数,不符合校验规则时,可使其向组件传递一个错误对象
    console.log(value);
    if (/^[A-Za-z0-9]{5,10}$/.test(value)) {
        callback()
    } else {
        callback(new Error('用户名至少五位,至多十位!'))
    }
}
const validatorPassWord = (rule, value, callback) => {
    if (/^(?=.*[a-zA-Z])[a-zA-Z0-9]{5,10}$/.test(value)) {
        callback()
    } else {
        callback(new Error('密码必须大于五位,小于十位,且至少包含一个大写或小写字母!'))
    }
}
let rule = {
    userName: [{
        // required:true, 
        // 表明该配置项必须要校验
        // message:'用户名不能为空，且至少五位', 
        // 报错信息
        // min:5, 
        // 文本最小长度
        trigger: 'change',
        // 验证触发的时机
        validator: validatorUserName
        // 自定义校验规则
    }],
    passWord: [{
        // required:true,
        // message:'密码不能为空，且至少五位',
        // min:5,
        // max:15,
        trigger: 'change',
        validator: validatorPassWord
    }]
}
// 自定义校验规则函数

let elFormLogin = ref('')
async function login() {
    await loginStore.formVerify(loginForm).then(
        () => {
            router.replace('/')
            ElNotification({
                type: 'success',
                title: '登录成功!',
                message: '欢迎回来'
            })
        }, (error) => {
            ElNotification({
                type: 'error',
                message: error.message
            })
        })
}
</script>

<style scoped lang="scss">
.login-container {
    width: 100%;
    height: 100vh;
    // vh是视口高度,表示元素占窗口可见区域的百分比值
    background-image: url('@/assets/image/th.jpg');
    background-size: cover;

    .login-area {
        background: rgba(255, 255, 255, 0.3);
        // 半透明背景 
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(8px);
        // 背景模糊效果
        border: 1px solid rgba(255, 255, 255, 0.2);
        position: relative;
        top: 16vh;
        width: 80%;
        min-height: 309px;
        max-height: 400px;


        h1 {
            position: relative;
            top: 5.2vh;
            left: 3.8vh;
            font-size: 24px;
            font-family: 'roundFont';
            font-style: oblique;
            transform: skewY(0.3deg)
        }

        .login-hello {
            display: block;
            width: 90px;
            height: 32px;
            background-image: url('@/assets/image/hello.png');
            position: relative;
            top: 4vh;
            left: 4vh;
        }

        .login-form {
            width: 70%;
            height: 60%;
            position: relative;
            top: 10vh;
            left: 10vh;

            .login-btn {
                width: 100%;
                background-color: #bfc7f7;
                color: #111;
                font-family: 'roundFont';
                font-size: 20px;
            }
        }
    }
}
</style>